<template>
 <el-form
    :model="model"
    :rules="formRules"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
    :size="size"
    v-bind="$attrs"
  >
    <el-row :gutter="15">
      <el-col
        v-for="(ctrId, index) in colOrder"
        :key="'form_' + ctrId + index"
        :span="formColSpan[ctrId]"
        v-show="showCol[ctrId]"
      >
        <transition name="el-zoom-in-top">
        <el-form-item
          :rules="ruleMeta[ctrId] ?? []"
          :label-width="itemMeta[ctrId].labelWidth??''"
          :size="size"
          :label="itemMeta[ctrId].label"
          :prop="itemMeta[ctrId].colName"
          v-show="showCol[ctrId]"
        >
          <!--判断要不要加载插槽-->
          
          <template v-if="(slotsKey.includes(itemMeta[ctrId].colName))">
            <!--<slot :name="ctrId">父组件没有设置插槽</slot>-->
            <slot :name="itemMeta[ctrId].colName">父组件没有设置插槽</slot>
          </template>
        
          <!--表单item组件，采用动态组件的方式-->
          <template v-else>
            <component
              :is="formItemKey[itemMeta[ctrId].controlType]"
              :model="model"
              v-bind="itemMeta[ctrId]"
            >
            </component>
          </template>
        </el-form-item>
        </transition>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue'
  import { ElForm, ElFormItem, ElRow, ElCol, ElCard } from 'element-plus'

  // 引入表单子控件
  import { formItem, formItemKey } from './item/_map-form-item'

  // 表单控件的属性 
  import { formProps, formController } from '../map'

  export default defineComponent({
    name: 'el-from-slot-div',
    components: {
      // ...formItem,
      ElForm, ElFormItem, ElRow, ElCol, ElCard
    },
    props: {
      ...formProps
    },
    setup (props, context) {
      // console.log('表单控件的props：', props)


      const slots = context.slots
      const slotsKey = Object.keys(slots)

      // 获取 $ref
      const formControl = ref(null)
      onMounted(() => {
        // console.log('表单dom', formControl)
      })

      const {
        formMeta,
        itemMeta,
        model,
        partModel
      } = props

      // 调用表单的控制类
      const {
        formColSpan, // 确定组件占位
        // formRules, // 表单的验证规则
        showCol, // 是否显示字段的对象
        setFormColShow, // 设置组件联动
      } = formController(formMeta, itemMeta, model, partModel)

      return {
        slotsKey,
        ...formMeta,
        itemMeta,
        showCol, // 是否显示字段的对象
        formColSpan, // 确定组件占位
        // 函数
        setFormColShow, // 设置组件联动
        //
        formControl, // 获取表单dom
        formItemKey // 子控件字典
      }
    }
  })
</script>